import React, { Component } from 'react'
import store from '../redux'
import { Table, Input,Form,Button } from 'antd';
import '../assets/css/layout.css'
export default class Layout extends Component {
    state = {
        dataSource: [],
        columns: [
            {
                title: '编号', //表头字段
                dataIndex: 'id', //调用数据对应的字段 table.id
            },
            {
                title: '姓名',
                dataIndex: 'name',

            },
            {
                title: '年龄',
                dataIndex: 'age',
            },
            {
                title: '操作',
                render: (obj,a,index)=><>
                    <Button type="primary" success='true' onClick={()=>this.edit(obj,index)}>修改</Button>
                    <Button type="primary" danger onClick={()=>this.del(index)}>删除</Button>
                </>
            },
            
        ],
        person_id: 0,
        person_index: 0
    }
    UNSAFE_componentWillMount() {
        store.subscribe(()=>{
            this.setState({dataSource:store.getState()})
             // setFieldsValue 
            this.form_ref.setFieldsValue(
                {
                    name: "",
                    age: ""
                }
            )
            this.setState({person_index: 0,person_id: 0})
        })
        this.setState({dataSource:store.getState()})
    }
    del(index){
        store.dispatch({type:'delete',index: index})
        
    }
    edit(obj,index){
        this.setState({person_index:index})
        //设置form数据
        this.form_ref.setFieldsValue(
            {
                name: obj.name,
                age: obj.age,
            }
        )
        this.setState({person_id: obj.id})
    }
    submit(value){
        var id = this.state.dataSource.length>0?this.state.dataSource[0].id+1:1
        var inserData = {
            id,
            name:value.name,
            age: value.age
        }
        if(this.state.person_id){
            inserData.id = this.state.person_id
            store.dispatch({type:'update',data:inserData,index: this.state.person_index})
        }else{
            store.dispatch({type:'insert',data:inserData})
        }
        

       
        
    }
    render() {
        return (
            <>
                <div className="yangshi">
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        initialValues={{ remember: true }}
                        autoComplete="off"
                        onFinish={this.submit.bind(this)}
                        ref={dom=>this.form_ref=dom}
                    >
                        <Form.Item
                            label="用户名"
                            name="name"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="年龄"
                            name="age"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                        </Form.Item>
                    </Form>

                    <Table rowKey='id' dataSource={this.state.dataSource} columns={this.state.columns} />
                </div>
            </>
        )
    }
}
